<template>
  <view class="food-list">
    <view class="food-item" v-for="(food, index) in foodList" :key="index" @tap="viewFoodDetail(food.id)">
      <image class="food-image" :src="food.image" mode="aspectFill"></image>
      <view class="food-info">
        <text class="food-name">{{ food.name }}</text>
        <text class="food-desc">{{ food.description }}</text>
        <view class="food-price-row">
          <text class="food-price">¥{{ food.price }}</text>
          <view class="add-btn" @tap.stop="addToCart(food)">+</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      foodList: [
        {
          id: 1,
          name: '香煎三文鱼',
          description: '新鲜三文鱼配以特制酱料',
          price: 88,
          image: '/static/food/salmon.jpg'
        },
        {
          id: 2,
          name: '意大利面',
          description: '经典番茄肉酱意面',
          price: 45,
          image: '/static/food/pasta.jpg'
        },
        {
          id: 3,
          name: '水果沙拉',
          description: '时令水果配酸奶',
          price: 32,
          image: '/static/food/salad.jpg'
        }
      ]
    }
  },
  methods: {
    viewFoodDetail(id) {
      uni.navigateTo({
        url: `/pages/dining/detail?id=${id}`
      })
    },
    addToCart(food) {
      // 添加到购物车的逻辑
      console.log('添加到购物车:', food)
    }
  }
}
</script>

<style lang="scss">
.food-list {
  padding: 20rpx;
  
  .food-item {
    display: flex;
    padding: 20rpx;
    margin-bottom: 20rpx;
    background: #fff;
    border-radius: 12rpx;
  }

  .food-image {
    width: 160rpx;
    height: 160rpx;
    border-radius: 8rpx;
  }

  .food-info {
    flex: 1;
    margin-left: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .food-name {
    font-size: 32rpx;
    font-weight: bold;
  }

  .food-desc {
    font-size: 26rpx;
    color: #666;
  }

  .food-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .food-price {
    color: #f56c6c;
    font-size: 32rpx;
    font-weight: bold;
  }

  .add-btn {
    width: 40rpx;
    height: 40rpx;
    line-height: 36rpx;
    text-align: center;
    border-radius: 50%;
    background: #f56c6c;
    color: #fff;
  }
}
</style>
